@import "@/style/imports";

.page-trade-list {
  height: 100vh;
  .layer {
    background: rgba(#000, 0.01);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
  }

  &.has-navbar{
    .at-tabs {
      top: $navigate-height-h5;

      &__header {
        top: $navigate-height-h5;
      }
    }
    .trade-list {
      &__scroll {
        @include page-scroll($navigate-height-h5, $edge-margin);
      }
    }
  }

  .at-tabs { 
    box-shadow: 0 10px 10px rgba(#000, 0.05); 
    &__header {
      position: fixed;
      left: 0; 
      width: 100%;
      z-index: $z-index-toolbar;
    }
    &__item {
      // height: $tabs-height;
      color: $color-brand-accent-light;
    }
    &__item-underline {
      width: 40%;
      left: 30%;
      background: $color-brand-primary;
    }
    &__item--active {
      color: $color-brand-primary;
    }
  }

  .trade-list {
    &__scroll {
      box-sizing: border-box;
      @include page-scroll(0, $edge-margin); 
      z-index: 2;
      &.with-tabs {
        @include page-scroll(
          $tabs-height + 30px,
          $edge-margin
        );
        /*  #ifdef  h5  */
        @include page-scroll(
          $navigate-height-h5 + $tabs-height + 30px,
          $edge-margin
        );
        /*  #endif  */
      }
      &.with-tabs-wx {
        @include page-scroll(
          $navigate-height-h5,
          $edge-margin
        );
      }
    }
    .trade-cont {
      .more {
        color: #d42f29;
        /*  #ifdef  h5  */
        border: none;
        /*  #endif  */
      }
    }
  }

  .trade-item {
    position: relative;
    .btn-action {
      width: auto;
      margin-left: 20px;
      padding: 0 22px;
      height: 42px;
      line-height: 42px;
      border-radius: 8px;
      font-size: $font-size-small;
      color: #fff;
      background: #fff;
      margin-top: 0px;
      &::after {
        background: none;
        border: none;
      }
    }
    &__ft-drug {
      position: absolute;
      left: 30px;
      bottom: 50px;
      font-size: 25px;
      color: #999;
      display: inline-block;
      vertical-align: top;
      line-height: 40px;
    }
  }
  .order-item {
    padding: 30px 0;
    border-bottom: 1px solid #ededed;
    &__img {
      width: 120px;
      height: 100px;
      border-radius: 6px;
      margin-right: 30px;
    }
    &__title {
      font-size: 24px;
      color: #333;
    }
    &__num {
      margin: 12px 0 0;
      font-size: 20px;
      color: #c1c1c1;
    }
    &__price {
      font-size: 24px;
      color: #000;
    }
  }
}

// .trade-item__hd-cont{
//   display: flex;
//   .trade-item__shop{
//     flex: 1;
//   }
//   .more{
//     flex:0 0 200px;
//     text-align: right;
//   }
// }
